<template>
  <div style="margin-left: 14%">
    <!-- 采集部位配置页 -->
    <el-breadcrumb separator="/">
      <!--面包屑 -->
      <el-breadcrumb-item>
        <i class="el-icon-s-home" style="margin-right: 15px; font-size: 16px"></i>照片采集配置
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="info">
      <el-card class="box-card">
        <el-row>
        <el-button class="addBtn global_add" @click="addPhotoName" :disabled="btnList.add" style="float:right; margin-right: 15px;margin-bottom: 5px;" type="text">+&nbsp;新增采集部位</el-button>
        </el-row>
        <el-table border stripe :data="tabledata.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
          <el-table-column align="center" prop="photo_name" label="采集部位名称">
          </el-table-column>
          <el-table-column align="center" prop="photo_en_name" label="采集部位英文名称">
          </el-table-column>
          <el-table-column align="center" prop="photo_type" label="采集类型">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button class="global_edit" type="text" @click="editPhotoName(scope.row)" size="small" :disabled="btnList.edit">编辑</el-button>
              <el-button class="global_delete" type="text" @click="deletePhotoName(scope.row)" style="color: red" size="small" :disabled="btnList.delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
             <el-pagination
             hide-on-single-page
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="tabledata.length"
          @current-change="handleCurrentChange"
          background
          class="pagination-style"
        ></el-pagination>
      </el-card>
    </div>
    <!-- 新增弹出框 -->
    <el-dialog
        :title="wz+'采集部位'"
        :visible.sync="dialogVisible"  :before-close="cancel"
        width="30%">
        <el-form label-position="right" :rules="addRules" ref="form" :model="form" label-width="110px" size="small">
            <el-form-item class="mb" label="采集部位" prop="photoName">
                <el-input v-model.trim="form.photoName" placeholder="请输入采集部位名称" clearable></el-input>
            </el-form-item>
            <el-form-item class="mb" label="采集部位英文" prop="photoEnName">
                <el-input v-model.trim="form.photoEnName" placeholder="请输入采集部位英文名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="采集类型" prop="photoTypeNum">
                      <el-select v-model="form.photoTypeNum" placeholder="请选择"   style="width: 85%;">
                        <el-option v-for="item in photoTypeList" :key="item.photo_type_num" :label="item.photo_type" :value="item.photo_type_num"></el-option>
                      </el-select>
                    </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button class="textBtn" @click="cancel" size="small">取 消</el-button>
            <el-button type="primary" @click="define" size="small">确 定</el-button>
        </span>
    </el-dialog>
  
  </div>
</template>

<script>
import roleBtn from '../../public/means'
export default {
    data() {
      var validateName = (rule, value, callback) => {
        let reg = /^[\u4e00-\u9fa5]{0,}$/
        if(!reg.test(value)){
            callback(new Error('元件名称只能为汉字！'));
        }
        callback();
      }
      var validateEnName = (rule, value, callback) => {
        let reg = /^[A-Za-z0-9-_.,"'\[\]{\|}！￥……*;:~!@#$%^&()（）、——+=?？，。；：’“”‘\\/\s]{0,}$/
        if(!reg.test(value)){
            callback(new Error('元件英文名称只能为字母、空格、中横线！'));
        }
        callback();
      }
      return {
        wz:'',
        menu_id: 25,
        currentPage: 1,
        pageSize: 10,
        btnList: {
          add: false,
          edit: false,
          delete: false
        },
        photoTypeList:[],
        tabledata:[],
        dialogVisible: false,
        form:{
          photoId:null,
          photoName:'',
          photoEnName:'',
          photoTypeNum:'',
        },
        addRules: {
            photoName: [
              { required: true, message: '请输入采集部位名称', trigger: 'blur' },
              { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
            ],
            photoEnName: [
              { required: true, message: '请输入采集部位英文名称', trigger: 'blur' },
              { validator: validateEnName, trigger: 'blur' }
            ],
            photoTypeNum: [
              { required: true, message: '请选择采集类型', trigger: 'blur' },
            ],
        },
    }
  },
  async created() {
      const role_id = JSON.parse(sessionStorage.getItem('userInfo')).role_id;
      this.getPhotoNameList();
      if(role_id){
      // 获取按钮权限状态
      let arr = await roleBtn.roleBtnList(role_id, this.menu_id)
      this.btnList = arr
    }
  },
  methods: {
      async getPhotoNameList() {
        const res= await this.$http.get('/testProdTemplate/getProductPhoto');
        this.tabledata = res.result;
        this.photoTypeList= res.result2;
      },
      editPhotoName(row) {
        this.wz = '编辑'
        this.form={
          photoId:row.photo_id,
          photoName:row.photo_name,
          photoEnName:row.photo_en_name,
          photoTypeNum:Number(row.photo_type_num),
        };
        this.dialogVisible = true  
      },
      async deleteConfirm(row) {
        let ret = await this.$http.delete("/testProdTemplate/deleteProductPhoto",{params:{photoId:row.photo_id}});
        if(ret.code === 200) {
          this.getPhotoNameList();
        }
      },
      deletePhotoName(row) {
        this.$confirm("确定要永久删除？", "提示", {
          type: "warning",
        })
        .then(({ result }) => {
          if (!result) {
            this.deleteConfirm(row);
          }
        })
        .catch(() => {});
    },
      handleCurrentChange(val) {
        this.currentPage = val;
      },
      addPhotoName(){
        this.wz = '新增'
        this.dialogVisible = true
        this.form={
          photoId:null,
          photoName:'',
          photoEnName:'',
          photoTypeNum:'',
        };
      },
      cancel() {
        this.dialogVisible = false
        this.$refs.form.resetFields()
      },
      async define() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.savePhotoInfo();
          } else {
            return false;
          }
        });
      },
      async savePhotoInfo(){
        let ret = await this.$http.post("/testProdTemplate/addProductPhoto", this.form);
        console.info(ret);
        if(ret.code==200){
          this.cancel();
          this.getPhotoNameList();
        }
        this.$message({
          showClose: true,
          message: ret.message,
          type: ret.type,
        });
      },
  }

}
</script>

<style lang="scss" scoped>
@import "./PhotoAcquisition.scss";
</style>